<template>
	<view class="content">
		<view :style="{height:safe.top+'px'}"></view>
		<view class="serch" :style="{height:getTitleBarHeight() + 'px'}">
			<view class="title">{{title}}</view>
			<navigator url="/pages/search/search" class="searchBut">
				<uni-icons class="icon" type="search" color="#888" size="18"></uni-icons>
				<text class="text">搜索</text>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		title: {
			type: String,
			default: "壁纸"
		}
	})
	import {
		ref
	} from 'vue';
	import {
		SYSTEM_INFO,
		getTitleBarHeight
	} from '@/utils/system.js';
	//得到屏幕安全区域
	const safe = ref({
		bottom: 0,
		left: 0,
		right: 0,
		top: 0
	})

	function getSafe() {
		safe.value = SYSTEM_INFO.safeAreaInsets
	
	}

	
	getSafe()
</script>

<style scoped>

	.serch {
		padding-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.title {

		font-size: 22px;
		font-weight: 700;
		color: #000;
	}

	.searchBut {
		width: 220rpx;
		height: 50rpx;
		border-radius: 60rpx;
		background: rgba(255, 255, 255, 0.4);
		border: 1px solid #fff;
		margin-left: 30rpx;
		color: #999;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.icon {
		margin-left: 5rpx;
	}

	.text {
		padding-left: 10rpx;
	}
</style>